<template>
  <a-modal
    :title="title"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="deviceName"
          label="设备名称">
          <a-input placeholder="请输入设备名称" v-model="model.deviceName"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="deviceSerial"
          label="设备编号">
          <a-input placeholder="请输入设备编号" v-model="model.deviceSerial"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="locationName"
          label="门店">
          <a-select
            ref="select"
            v-model="model.locationName"
            style="width: 365px"
            placeholder="请选择门店"
            @change="handleChange"
          >
            <a-select-option :value="item.locationName"   v-for="(item, index) in umbrellaList" :key="index" >
              {{item.locationName}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
  import { listBladeUmbrellaLocation } from "@/api/umbrella/BladeUmbrellaLocation";
  import {addBladeDevice, updateBladeDevice } from "@/api/umbrella/BladeDevice";
  export default {
    name: 'bladeDevice',
    components: {},
    data() {
      return {
        umbrellaList:[],
        value: 1,
        title: '操作',
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        validatorRules: {
          deviceName: [{ required: true, message: '请输入设备名称!' }],
          deviceSerial: [{ required: true, message: '请输入设备编号!' }],
          locationName: [{ required: true, message: '请选择门店!' }],
        },
        queryParam:{
          current: 1,
          size: 99999,
        },
      }
    },
    created() {
      this.getUmbrellaList();
    },
    methods: {

      getUmbrellaList(){
        listBladeUmbrellaLocation(this.queryParam).then(res =>{
          this.umbrellaList = res.data.records;
          console.log( this.umbrellaList)
        })
      },

      add() {   //添加
        this.edit({
          status: 0
        })
      },
      handleChange(value) {
        this.umbrellaList.filter(item =>{
          if(item.locationName == value){
            this.model.locationId = item.id
          }
        })

      },
      change(e){
        // console.log(e.target.value);
      },
      edit(record) { //修改
        if (record.id) {
          this.visiblekey = true
        } else {
          this.visiblekey = false
        }
        this.model = Object.assign({}, record)
        this.visible = true
      },
      // 确定
      handleOk() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            if (this.model.id != null) {
              updateBladeDevice(this.model).then(response => {
                if (response.success) {
                  that.$message.success(response.msg)
                  that.$emit('ok')
                } else {
                  that.$message.warning(response.msg)
                }
              }).finally(() => {
                that.confirmLoading = false
                that.close()
              });
            } else {
              addBladeDevice(this.model).then(response => {
                if (response.success) {
                  that.$message.success(response.msg)
                  that.$emit('ok')
                } else {
                  that.$message.warning(response.msg)
                }
              }).finally(() => {
                that.confirmLoading = false
                that.close()
              });;
            }
          } else {
            return false;
          }
        })
      },
      // 关闭
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close')
        this.fileList = []
        this.visible = false
        this.$refs.form.resetFields();
      },
    }
  }
</script>

<style scoped>

</style>